<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="upload_single" :style="{width,height}">
        <el-upload
        class="avatar-uploader"
        :action="`${baseApi}${action}`"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        @mouseover="isCz = true" 
        @mouseout="isCz = false"
        >
            <div class="img" v-if="imageUrl">
                <img :src="imageUrl" class="avatar" />
                <div class="cz" v-show="isCz">
                    <el-icon @click.stop="showImg"><View /></el-icon>
                    <el-icon @click.stop="removeImg"><Delete /></el-icon>
                </div>
            </div>
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
    </div>
    
    <div class="dialog" @click.self="dialogVisible=false" v-if="dialogVisible">
        <img :src="imageUrl"/>
    </div>
  </template>
<script lang="ts" setup name="UploadFileSingle">
    let props = defineProps({
        baseApi:{
            type: String,
            // default: import.meta.env.VITE_APP_BASE_API
            default: ''
        },
        action: {
            type: String,
            default: '/api/admin/product/fileUpload'
        },
        width: {
            type: String,
            default: '178px'
        },
        height: {
            type: String,
            default: '178px'
        },
        imgType: {
            type: Array<string>,
            default: ['image/jpeg','image/jpg','image/png','image/gif','image/bmp']
        },
        imgSize: {
            type: Number,
            default: 2
        },
    })

    import { ref } from 'vue'
    import { ElMessage } from 'element-plus'
    import { Plus } from '@element-plus/icons-vue'

    import type { UploadProps } from 'element-plus'

    let imageUrl = ref('')
    let isCz = ref(false)
    let dialogVisible = ref(false)
    const {imgType, imgSize} = props;


    const $emit = defineEmits(['imgUrlChange'])
    const handleAvatarSuccess: UploadProps['onSuccess'] = ( response, uploadFile ) => {
        imageUrl.value = URL.createObjectURL(uploadFile.raw!)
        if(response.code === 200){
            $emit('imgUrlChange', response.data)
        }
    }

    const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
        if (!imgType.includes(rawFile.type)) {
            ElMessage.error(`图片格式错误，请上传${imgType.join(',')}格式图片`)
            return false
        } else if (rawFile.size / 1024 / 1024 > imgSize) {
            ElMessage.error(`上传图片大小不能超过${imgSize}MB!`)
            return false
        }
        return true
    }

    const showImg = () =>{
        dialogVisible.value = true;
    }
    const removeImg = () =>{
        imageUrl.value = ''
        isCz.value = false;
        $emit('imgUrlChange','');
    }

    defineExpose({
        imageUrl
    })
</script>

<style lang="scss" scoped>
    :deep(.avatar-uploader) {
        width: 100%;
        height: 100%;
    }
    :deep(.el-upload) {
        width: 100%;
        height: 100%;
    }
    :deep(.avatar-uploader) {
        width: 100%;
        height: 100%;
    }
    .avatar-uploader .avatar {
        display: block;
    }

    .img{
        position: relative;
        width: 100%;
        height: 100%;
        img{
            width: 100%;
            height: 100%;
        }

        .cz{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.5);
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            .el-icon{
                font-size: 24px;
                color: #fff;
            }
        }
    }

    .dialog{
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(0,0,0,.5);
        img{
            width: 50%;
        }
    }
</style>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
</style>